<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备类型基础管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .container {
            padding: 20px;
        }
        .header-operations {
            margin-bottom: 20px;
        }
        .info-tag {
            margin: 2px;
        }
        .el-dialog__body {
            padding: 20px 30px;
        }
        .el-table {
            margin: 8px 0;
        }
        .el-table th {
            padding: 10px 0;
        }
        .el-table td {
            padding: 8px 0;
        }
        .delete-btn {
            color: #F56C6C;
        }
        .delete-btn:hover {
            color: #f78989;
        }
        .el-table__row .el-input {
            width: 95%;
        }
        .el-select-dropdown__item i {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="设备类型系统分组" name="group">
                    <div style="margin-bottom: 20px;">
                        <el-button type="primary" size="small" @click="addGroup"><i class="el-icon-plus"></i> 新增分组</el-button>
                    </div>
                    <el-table :data="groups" style="width: 100%">
                        <el-table-column prop="name" label="分组名称"></el-table-column>
                        <el-table-column prop="description" label="分组描述"></el-table-column>
                        <el-table-column label="操作" width="120" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="editGroup(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="deleteGroup(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="设备类型管理" name="type">
                    <div style="margin-bottom: 20px;">
                        <el-select v-model="selectedGroup" placeholder="请选择分组" style="width: 200px; margin-right: 10px;">
                            <el-option v-for="g in groups" :key="g.id" :label="g.name" :value="g.id"></el-option>
                        </el-select>
                        <el-button type="primary" size="small" @click="handleAddType"><i class="el-icon-plus"></i> 新增设备类型</el-button>
                    </div>
                    <el-table :data="filteredDeviceTypes" style="width: 100%">
                        <el-table-column prop="name" label="设备类型名称" width="180"></el-table-column>
                        <el-table-column prop="description" label="设备类型描述"></el-table-column>
                        <el-table-column label="操作" width="120" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="handleEditType(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="handleDeleteType(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

            <!-- 分组编辑对话框 -->
            <el-dialog 
                :title="groupDialogTitle" 
                :visible.sync="groupDialogVisible"
                width="500px">
                <el-form :model="currentGroup" label-width="100px" size="small">
                    <el-form-item label="分组名称" required>
                        <el-input v-model="currentGroup.name" placeholder="请输入分组名称"></el-input>
                    </el-form-item>
                    <el-form-item label="分组描述">
                        <el-input 
                            type="textarea" 
                            v-model="currentGroup.description" 
                            placeholder="请输入分组描述"
                            :rows="3">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="groupDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveGroup">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 设备类型编辑对话框 -->
            <el-dialog 
                :title="typeDialogTitle" 
                :visible.sync="typeDialogVisible"
                width="500px">
                <el-form :model="currentType" label-width="100px" size="small">
                    <el-form-item label="设备类型名称" required>
                        <el-input v-model="currentType.name" placeholder="请输入设备类型名称"></el-input>
                    </el-form-item>
                    <el-form-item label="所属分组" required>
                        <el-select v-model="currentType.groupId" placeholder="请选择分组" style="width: 100%;">
                            <el-option v-for="g in groups" :key="g.id" :label="g.name" :value="g.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备类型描述">
                        <el-input 
                            type="textarea" 
                            v-model="currentType.description" 
                            placeholder="请输入设备类型描述"
                            :rows="3">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="typeDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveType">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'group',
                    groups: [
                        { id: 1, name: '建筑设施及设备区域', description: '各类机房和设施区域' },
                        { id: 2, name: '供配电系统', description: '电力供应和配电设备' },
                        { id: 3, name: '供/排水系统', description: '供水和排水相关设备' },
                        { id: 4, name: '电梯系统', description: '电梯及相关设备' },
                        { id: 5, name: '消防系统', description: '消防报警和灭火设备' },
                        { id: 6, name: '空调系统', description: '空调通风设备' },
                        { id: 7, name: '环境系统', description: '环境监测设备' }
                    ],
                    selectedGroup: 1,
                    deviceTypes: [
                        // 建筑设施及设备区域
                        { id: 1, groupId: 1, name: '生活供水机房', description: '生活用水供应机房' },
                        { id: 2, groupId: 1, name: '发电机房', description: '备用发电机房' },
                        { id: 3, groupId: 1, name: '高压配电机房', description: '高压配电设备机房' },
                        { id: 4, groupId: 1, name: '低压配电机房', description: '低压配电设备机房' },
                        { id: 5, groupId: 1, name: '变压器机房', description: '变压器设备机房' },
                        { id: 6, groupId: 1, name: '集水井区域', description: '集水井及相关设备区域' },
                        { id: 7, groupId: 1, name: '直行电梯', description: '垂直运输电梯设备' },
                        // 供配电系统
                        { id: 8, groupId: 2, name: '配电柜', description: '电力分配控制柜' },
                        { id: 9, groupId: 2, name: '变压器', description: '电压变换设备' },
                        { id: 10, groupId: 2, name: '发电机', description: '备用发电设备' },
                        { id: 11, groupId: 2, name: '蓄电池', description: '储能电池设备' },
                        { id: 12, groupId: 2, name: '发电机油箱', description: '发电机燃料储存设备' },
                        // 供/排水系统
                        { id: 13, groupId: 3, name: '水泵', description: '水压提升设备' },
                        { id: 14, groupId: 3, name: '集水井', description: '雨水收集设备' },
                        { id: 15, groupId: 3, name: '水池/水箱', description: '储水设备' },
                        { id: 16, groupId: 3, name: '管网压力', description: '管网压力监测设备' },
                        // 电梯系统
                        { id: 17, groupId: 4, name: '电梯牵引机房', description: '电梯动力机房' },
                        { id: 18, groupId: 4, name: '电梯轿厢', description: '电梯载客厢体' },
                        { id: 19, groupId: 4, name: '底坑', description: '电梯底部设备区域' },
                        // 消防系统
                        { id: 20, groupId: 5, name: '散热风扇', description: '设备散热通风设备' },
                        { id: 21, groupId: 5, name: '消防泵', description: '消防供水设备' },
                        { id: 22, groupId: 5, name: '烟感探测器', description: '烟雾检测设备' },
                        // 空调系统
                        { id: 23, groupId: 6, name: '电梯空调', description: '电梯专用空调设备' },
                        { id: 24, groupId: 6, name: '机房空调', description: '机房专用空调设备' },
                        { id: 25, groupId: 6, name: '新风系统', description: '新风换气设备' },
                        // 环境系统
                        { id: 26, groupId: 7, name: '机房环境', description: '机房环境监测设备' },
                        { id: 27, groupId: 7, name: '温湿度传感器', description: '温湿度监测设备' }
                    ],
                    groupDialogVisible: false,
                    typeDialogVisible: false,
                    groupDialogTitle: '',
                    typeDialogTitle: '',
                    currentGroup: {
                        name: '',
                        description: ''
                    },
                    currentType: {
                        name: '',
                        description: '',
                        groupId: 1
                    },
                    isEdit: false
                }
            },
            computed: {
                filteredDeviceTypes() {
                    return this.deviceTypes.filter(dt => dt.groupId === this.selectedGroup);
                }
            },
            methods: {
                // 分组管理
                addGroup() {
                    this.isEdit = false;
                    this.groupDialogTitle = '新增分组';
                    this.currentGroup = {
                        name: '',
                        description: ''
                    };
                    this.groupDialogVisible = true;
                },
                editGroup(row) {
                    this.isEdit = true;
                    this.groupDialogTitle = '编辑分组';
                    this.currentGroup = JSON.parse(JSON.stringify(row));
                    this.groupDialogVisible = true;
                },
                deleteGroup(row) {
                    this.$confirm('确认删除该分组吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.groups.findIndex(item => item.id === row.id);
                        if (index > -1) {
                            this.groups.splice(index, 1);
                        }
                        this.$message.success('删除成功');
                    });
                },
                saveGroup() {
                    if (!this.currentGroup.name) {
                        this.$message.warning('请输入分组名称');
                        return;
                    }
                    if (this.isEdit) {
                        const index = this.groups.findIndex(item => item.id === this.currentGroup.id);
                        if (index > -1) {
                            this.groups.splice(index, 1, {...this.currentGroup});
                        }
                    } else {
                        const newId = Math.max(...this.groups.map(g => g.id), 0) + 1;
                        this.groups.push({
                            ...this.currentGroup,
                            id: newId
                        });
                    }
                    this.groupDialogVisible = false;
                    this.$message.success('保存成功');
                },
                // 设备类型管理
                handleAddType() {
                    this.isEdit = false;
                    this.typeDialogTitle = '新增设备类型';
                    this.currentType = {
                        name: '',
                        description: '',
                        groupId: this.selectedGroup
                    };
                    this.typeDialogVisible = true;
                },
                handleEditType(row) {
                    this.isEdit = true;
                    this.typeDialogTitle = '编辑设备类型';
                    this.currentType = JSON.parse(JSON.stringify(row));
                    this.typeDialogVisible = true;
                },
                handleDeleteType(row) {
                    this.$confirm('确认删除该设备类型吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.deviceTypes.findIndex(item => item.id === row.id);
                        if (index > -1) {
                            this.deviceTypes.splice(index, 1);
                        }
                        this.$message.success('删除成功');
                    });
                },
                saveType() {
                    if (!this.currentType.name) {
                        this.$message.warning('请输入设备类型名称');
                        return;
                    }
                    if (this.isEdit) {
                        const index = this.deviceTypes.findIndex(item => item.id === this.currentType.id);
                        if (index > -1) {
                            this.deviceTypes.splice(index, 1, {...this.currentType});
                        }
                    } else {
                        const newId = Math.max(...this.deviceTypes.map(t => t.id), 0) + 1;
                        this.deviceTypes.push({
                            ...this.currentType,
                            id: newId
                        });
                    }
                    this.typeDialogVisible = false;
                    this.$message.success('保存成功');
                }
            }
        })
    </script>
</body>
</html> 